<?php
/**
 * name：time.php
 * 
 * @author     HuanYing
 * @qq        419437697
 * @email     admin@52hyjs.com
 * @website   www.52hyjs.com
 * @date       5/28/2025 8:24:13 AM
 * @version    1.0.0
 * @copyright  Copyright (c) 2025, HuanYing. All rights reserved.
 */

// 转载请注明出处：https://www.ailingxi.cn/post-2163.html   灵锡资源网
include_once "Common/Core_brain.php";
?>
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>团队发展时间轴 - <?php echo conf('Name');?></title>
  <link rel="stylesheet" href="assets/admin/css/codebase.min-5.5.css">
  <link rel="stylesheet" href="assets/fonts/fontawesome/css/all.min.css">
  <style>
    .timeline {
      position: relative;
      margin: 40px auto;
      padding: 0 0 40px 0;
      max-width: 800px;
    }
    .timeline:before {
      content: '';
      position: absolute;
      left: 30px;
      top: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(180deg, #0284c7 0%, #65a30d 100%);
      border-radius: 2px;
    }
    .timeline-item {
      position: relative;
      margin-bottom: 40px;
      padding-left: 70px;
    }
    .timeline-item:last-child { margin-bottom: 0; }
    .timeline-icon {
      position: absolute;
      left: 10px;
      top: 0;
      width: 40px;
      height: 40px;
      background: #fff;
      border: 4px solid #0284c7;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #0284c7;
      z-index: 2;
      box-shadow: 0 2px 8px rgba(2,132,199,0.08);
    }
    .timeline-content {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 18px 24px;
      box-shadow: 0 2px 8px rgba(2,132,199,0.04);
      position: relative;
    }
    .timeline-date {
      font-size: 14px;
      color: #6c757d;
      margin-bottom: 6px;
      font-weight: 500;
    }
    @media (max-width: 600px) {
      .timeline { padding-left: 0; }
      .timeline-item { padding-left: 60px; }
      .timeline-icon { left: 0; width: 32px; height: 32px; font-size: 16px; }
      .timeline-content { padding: 12px 12px; }
    }
  </style>
</head>
<body>
<div class="container py-4">
  <h2 class="text-center mb-4"><i class="fa fa-clock-o me-2"></i>团队发展时间轴</h2>
  <div class="timeline">
    <?php
    $rs = $DB->query("SELECT * FROM nteam_timeline ORDER BY timeline_date DESC");
    $hasData = false;
    while($row = $rs->fetch()){
      $hasData = true;
      $icon = $row['icon'] ? $row['icon'] : 'fa-star';
      $color = $row['color'] ? $row['color'] : 'primary';
      echo '<div class="timeline-item">';
      echo '<div class="timeline-icon bg-'.$color.' text-white"><i class="fa '.$icon.'"></i></div>';
      echo '<div class="timeline-content">';
      echo '<div class="timeline-date">'.htmlspecialchars($row['timeline_date']).'</div>';
      echo '<div><b>'.htmlspecialchars($row['title']).'</b><br>'.nl2br(htmlspecialchars($row['description'])).'</div>';
      echo '</div></div>';
    }
    if(!$hasData){
      echo '<div class="text-center text-muted py-5">暂无团队发展履历，敬请期待！</div>';
    }
    ?>
  </div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/admin/js/codebase.app.min-5.5.js"></script>
</body>
</html> 


